<script setup lang="ts">
import PageSearch from "@/components/page-search/page-search.vue";
import PageContent from "@/components/page-content/page-content.vue";
import { computed } from "vue";
import PageModal from "@/components/page-modal/page-modal.vue";
import searchConfig from "@/views/main/system/department/config/search.config";
import contentConfig from "@/views/main/system/department/config/content.config";
import modalConfig from "@/views/main/system/department/config/modal.config";
import useSystemStore from "@/stores/modules/main/system/system";
import usePageContent from "@/hooks/usePageContent";
import usePageModal from "@/hooks/usePageModal";

const { contentRef, handleQueryClick, handleResetClick } = usePageContent();

const { modalRef, handleNewClick, handleEditClick } = usePageModal();

const modalConfigRef = computed(() => {
  const systemStore = useSystemStore();
  const departments = systemStore.departmentList.map((item) => {
    return { label: item.name, value: item.id };
  });
  modalConfig.formItems.forEach((item) => {
    if (item.prop === "parentId") {
      item.options.push(...departments);
    }
  });
  return modalConfig;
});
</script>

<template>
  <div class="department-wrapper">
    <page-search
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <page-content
      :content-config="contentConfig"
      ref="contentRef"
      @new-data-click="handleNewClick"
      @edit-data-click="handleEditClick"
    >
      <template #leader="scope"
        ><span class="custom-leader"
          >{{ scope.row[scope.prop] }}-{{ scope.leaderRange }}</span
        ></template
      >
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfigRef" />
  </div>
</template>

<style scoped>
.custom-leader {
  color: #ff4040;
}
</style>
